<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抄表管理</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
        <div class="row" style="background-color: white; height: 60px; padding: 13px; border: none; border-radius: 8px;">
            <div class="col-md-12">
                <lab style="float: left;height: 30px;line-height: 30px;margin-left: 20px;margin-right: 10px">门牌号:</lab>
                <input type="text" class="form-control" placeholder="门牌号" v-model="houseNumber" style="width: 200px;float: left"/>
                <lab style="float: left;height: 30px;line-height: 30px;margin-left: 20px;margin-right: 10px">费用类型:</lab>
                <select class="form-control" v-model="typeId" style="width: 200px;float: left">
                    <option value=0>请选择费用类型</option>
                    <option value=1>物业费</option>
                    <option value=2>水费</option>
                    <option value=3>电费</option>
                    <option value=4>车位费</option>
                </select>
                <button style="margin-left: 30px;width: 80px;float: left"  class="btn btn-primary" @click="doQuery">搜索</button>
                <button style="margin-left: 30px;width: 80px;float: left"  class="btn btn-primary" @click="reset">重置</button>
            </div>
    </div>
    <div class="row">
        <div class="col-md-12" style="height: 50px; line-height: 50px;">
            <button class="btn btn-info" @click="doAdd">新增</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped">
                <caption>抄表管理</caption>
                <thead>
                    <tr>
                        <th>门牌号</th>
                        <th>户主</th>
                        <th>费用类型</th>
                        <th>上次度数</th>
                        <th>本次度数</th>
                        <th>登记时间</th>
                        <th>抄表员</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="r in recordsList">
                        <td>{{r.houseNumber}}</td>
                        <td>{{r.userName}}</td>
                        <td>{{r.type}}</td>
                        <td>{{r.num}}</td>
                        <td>{{r.num2}}</td>
                        <td>{{r.checkTime}}</td>
                        <td>{{r.meter}}</td>
                        <td>
                            <button class="btn btn-danger" @click="doRemove(r.id)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <ul class="pagination" v-for="p in pageNum">
                <li v-if="p == pageIndex" class="active"><a @click="doGo(p)">{{p}}</a></li>
                <li v-else="p == pageIndex"><a @click="doGo(p)">{{p}}</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            typeList:null,
            recordsList:null,
            //用于分页
            pageIndex: 1,
            pageSize: 5,
            pageTotle:0,
            pageNum: 0,
            houseNumber:null,
            typeId:0
        },
        methods: {
            //请求主列表
            requestRecordsList(p){
                this.pageIndex=p;
                var uid = localStorage.getItem("uid");
                axios.get("http://localhost:8080/records/list?typeId="+this.typeId+"&houseNumber="+this.houseNumber+"&pageIndex="+p+"&pageSize="+this.pageSize+"&uid="+uid).then(response=>{
                    console.log(response.data)
                    this.recordsList = response.data.data;
                    this.pageTotle = response.data.pageTotal;
                    // //计算有多少页
                    this.pageNum = Math.ceil(this.pageTotle/this.pageSize);
                })
            },
            //请求费用类型列表
            requestTypeList(){
                var uid = localStorage.getItem("uid");
                axios.get("http://localhost:8080/proType/list?uid="+uid).then(response=>{
                    console.log(response.data)
                    this.typeList = response.data.data
                })

            },

            //分页列表
            doGo(p){
                this.pageIndex = p;
                this.requestRecordsList(p);//调用请求用户列表的函数
            },

            //点击搜索执行搜索
            doQuery(){
                this.requestRecordsList(this.pageIndex);
            },

            //点击删除按钮执行
            doRemove(id){
                var uid = localStorage.getItem("uid");
                var url= "http://localhost:8080/records/remove?id="+id+"&uid="+uid;
                axios.get(url).then(response=>{
                    if (response.data.code==200){//成功
                        this.requestRecordsList(1);
                    }else {//失败
                        alert(response.data.msg);
                    }
                })
            },

            //点击添加执行
            doAdd(){
                window.parent.main_right.location.href = "records_add_update.html";
            },

            //点击重置按钮执行
            reset(){
                this.typeList=null;
                this.recordsList=null;
                //用于分页
                this.pageIndex= 1;
                this.pageSize= 5;
                this.pageTotle=0;
                this.pageNum= 0;
                this.houseNumber=null;
                this.typeId=0;
                this.requestRecordsList(this.pageIndex);
            }

        },
        created: function () {
            this.requestRecordsList(this.pageIndex);
        }
    });
</script>
</body>
</html>